<template>
	<view class="page w-full h-100vh bg-fffbf4 flex flex-col align-items-center overflow-hidden">
		<view class="navBar w-full pl-30 pt-40 z-9999">
			<view class="title text-581403 f-40 text-bold flex justify-center align-items-center">
				宗亲理事
				<image src="@/static/icon-16.png" class="back-icon" @click="$goBack()"></image>
			</view>
		</view>

		<view class="main overflow-hidden">
			<view class="overflow-y h-full">
				<view class="text-3D3D3D f-28 text-600 flex" v-for="[key,value] in listData" :key="key">
					<text class="text-93776F mr-20 flex-none">{{ key }}:</text>
					<text>{{ `${value}` }}</text>
				</view>

				<!-- <view class="flex justify-center mt-100">
					<image :src="wxcode" class="qrcode bg-danger"></image>
				</view> -->
			</view>

		</view>
	</view>
</template>

<script setup>
	import { onLoad } from '@dcloudio/uni-app';

	const { api_get_kinsman } = useRequest();

	const listData = ref([])
	const wxcode = ref('')
	const loadKinsman = () => {
		api_get_kinsman({ page: 0, size: 10, sortBy: 'createdAt', sortDir: 'desc' }).then(res => {
			let map = new Map()
			res.forEach(item => {
				if (!map.has(item.title)) {
					map.set(item.title, [item.name])
				} else {
					let value = map.get(item.title)
					value.push(item.name)
					map.set(item.title, value)
				}
			})
			map.set('联系电话', [res[0].phone])
			// wxcode.value = res[0].wxcode
			listData.value = map
		})
	}

	onLoad(() => {
		loadKinsman()
	})
</script>

<style lang="scss" scoped>
	.page {
		background-image: url('/src/static/bg-08.png');
		background-size: 100% 100%;
	}

	.main {
		width: 660rpx;
		height: 80vh;
		margin-top: 60rpx;
		padding: 160rpx 80rpx;
		background-image: url('/src/static/bg-10.png');
		background-size: 100% 100%;
		line-height: 80rpx;

		.qrcode {
			width: 320rpx;
			height: 320rpx;
			border-radius: 32rpx;
		}
	}
</style>